<script setup>
import { onMounted, ref, getCurrentInstance } from "vue";
import { handleGoBack } from "@/utils/router";
import { useUserStore } from "@/stores/user";
import CustomizeTopBar from "../../pages/components/customize-top-bar/CustomizeTopBar.vue";
import { skip } from "@/services/user";
import Nodata from "@/pages/components/nodata.vue";

// const user = useUserStore();
const statusBarHeight = ref(0);
const menuButtonInfo = ref(null);

// 获得当前组件实例
const instance = getCurrentInstance();

// 响应式数据
//兼容小程序
// #ifdef MP-WEIXIN
menuButtonInfo.value = uni.getMenuButtonBoundingClientRect();
// #endif
statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
// init data loading
const initDataLoading = ref(true);
// api得到的数据 展示
const showDetail = ref(undefined);

// go back
const goBack = () => {
  handleGoBack();
};

// 保存到手机
const download = () => {
  if (
    showDetail.value &&
    showDetail.value.service_wechat_path &&
    showDetail.value.service_wechat_path !== ""
  ) {
    // #ifdef H5
    let a = document.createElement("a");
    a.download = "";
    a.href = showDetail.value.service_wechat_path;
    document.body.appendChild(a);
    a.click();
    a.remove();
    // #endif
    // #ifdef APP-PLUS || MP-WEIXIN
    uni.saveImageToPhotosAlbum({
      filePath: showDetail.value.service_wechat_path,
      success: () => {
        uni.showToast({
          title: "保存成功",
          duration: 1000,
        });
      },
      fail: () => {
        uni.showToast({
          title: "保存失败",
          icon: "error",
          duration: 2000,
        });
      },
    });
    // #endif
  }
};

// init
const initData = async () => {
  try {
    initDataLoading.value = true;
    const results = await Promise.all([skip()]);
    showDetail.value = results[0].data;
    initDataLoading.value = false;
  } catch (error) {
    initDataLoading.value = false;
  }
};

onMounted(() => {
  initData();
});
</script>

<template>
  <view class="my-content u-skeleton">
    <customize-top-bar title="官方客服">
      <template v-slot:bgView>
        <view class="mycontent-top-bc"></view>
      </template>
    </customize-top-bar>

    <view class="container">
      <view class="business-card">
        <view class="business-card-info">
          <text class="name-text">官方客服 </text>
        </view>
        <up-divider></up-divider>
        <view
          class="business-card-code"
          v-if="showDetail && showDetail.service_wechat_path"
        >
          <view class="code-warp">
            <!-- #ifdef H5 -->
            <!-- h5端部分机型用uniappimg标签无法长按保存，用回原生img标签 -->
            <view>
              <img
                class="code-data-image"
                :src="showDetail.service_wechat_path"
              />
            </view>
            <!-- #endif -->
            <!-- #ifdef APP-PLUS || MP-WEIXIN -->
            <view>
              <image
                class="code-data-image"
                :src="showDetail.service_wechat_path"
                mode="widthFix"
              ></image>
            </view>
            <!-- #endif -->
          </view>
          <view class="description-text">扫一扫 添加企业微信客服</view>
          <view class="save-btn-warp">
            <!-- #ifdef H5 -->
            长按图片保存或分享
            <!-- #endif -->
            <!-- #ifdef APP-PLUS || MP-WEIXIN -->
            <up-button
              @click="download"
              type="warning"
              shape="circle"
              text="保存到相册"
            ></up-button>
            <!-- #endif -->
          </view>
        </view>
        <view class="init-data-loading-warp" v-if="initDataLoading">
          <up-loading-icon></up-loading-icon>
        </view>
        <Nodata
          v-if="
            (!showDetail || (showDetail && !showDetail.service_wechat_path)) &&
            !initDataLoading
          "
        ></Nodata>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "Index.scss";
</style>
